<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <main id="app">
        <p>vue提供了$，用于方法vue对象的属性。</p>
        <ul>
            <li>$data：data属性</li>
            <li>$el：获取vue对象接管的DOM对象</li>
        </ul>
    </main>
</body>
<script src="../vue.min.js"></script>
<script>

    let num = 1;

    let data = {
        name: "Hydra",
        age: 16,
        sex: "男"
    }

    let vue = new Vue({
        el: "#app",
        data,
        methods: {
            sayHello() {
                // 访问data里面的属性值，直接使用this.属性名
                return `${this.name}说：“你好！”`;
            },
            isAudltMethod() {
                console.log("调用方法！")
                return this.age >= 18 ? "是" : "否";
            },
            increaseAge() {
                this.age++;
            },
            increaseNum() {
                num++;
            }
        },
        // computed内部也定义函数，computed称为计算属性
        // 注意：虽然定义的是方法，但是模板与法中作为普通属性使用
        // 计算属性：与方法相比，虽然都可以调用逻辑，但是计算属性有结果缓存。
        // 如果结果依赖的底层数据没有发生改变，那么不会重新计算属性值，而是使用缓存值。
        // 计算属性的底层依赖数据只能来源于vue对象内部的属性（属性、计算属性、方法），
        // 如果来源于外部，外部的值发生改变也不会触发方法进行重新计算
        computed: {
            isAudlt() {
                console.log("调用计算属性！")
                return this.age >= 18 ? "是" : "否"
            },
            cheng2() {
                return num * 2;
            },
            canSee() {
                return this.isAudltMethod == '是' ? "可以看" : '不要看'
            }

        }
    })

    console.log(vue.$data == data); // true
    console.log(vue.$el == document.querySelector("#app")); // true
    console.log(vue.$watch)



</script>